<template>
  <div class="app-container">
    <el-form ref="elForm" size="medium" label-width="100px">
      <el-row :gutter="24">
        <el-col :span="6">
          <el-form-item label="商品ID">
            <el-input v-model="item.itemId" placeholder="请输入商品ID"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" size="medium" @click="getItemInfo">搜索</el-button>
        </el-col>

      </el-row>
      <el-divider/>
      <el-row :gutter="24">
        <el-col :span="8" :offset="1">
          <el-descriptions title="商品信息">
            <el-descriptions-item label="商品名称" :span="3">{{ item.itemName }}</el-descriptions-item>
            <el-descriptions-item label="商品图片" :span="3">
              <el-image style="width: 100px; height: 100px" :src="item.image +'_tn'"></el-image>
            </el-descriptions-item>
            <el-descriptions-item label="店铺Id">{{ item.shopId }}</el-descriptions-item>
            <el-descriptions-item label="全球商品Id"> {{ item.globalProductId }}</el-descriptions-item>
            <el-descriptions-item label="货号"> {{ item.itemSku }}</el-descriptions-item>
          </el-descriptions>
        </el-col>

      </el-row>
      <el-divider/>
      <el-row :gutter="15" v-for="(model, index) in item.itemModelList">
        <el-col :span="0.5" :offset="1">
          <el-tag>型号集合{{ index + 1 }}</el-tag>
        </el-col>
        <el-col :span="3">
          <el-form-item label="成本">
            <el-input v-model="model.inflatedPriceOfOriginalPrice" @change="handleChange(model,index)"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="重量">
            <el-input v-model="model.inflatedPriceOfCurrentPrice" @change="handleChange(model,index)"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="价格">
            <el-input v-model="model.currentPrice" placeholder="请输入价格" :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider/>
      <el-form-item size="large">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {
  getItemWithPrice,
  getComputedPrice,
  changeSinglePrice

} from "@/api/shop/changePrice";
import Cookies from "js-cookie";

export default {
  name: "fastChange",
  data() {
    return {
      item: {},
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    getItemInfo() {
      if (this.item.itemId == null) {
        return;
      }
      getItemWithPrice(this.item.itemId).then((response) => {
        this.item = response.data;
      });
    },

    handleChange(model, index) {
      getComputedPrice(model).then((response) => {
        this.item.itemModelList[index].currentPrice = response.data;
      });
    },

    submitForm() {
      changeSinglePrice(this.item).then((response) => {
        if (response.data) {
          this.$modal.msgSuccess("修改成功");
        }else{
          this.$modal.msgError("修改失败，请检查折扣信息是否失效！");
        }
      });
    },
    resetForm() {
      this.item = [];
    },
  }
}
</script>
<style>
</style>
